<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <son />

    <son />
  </div>
</template>

<script>
// import Vue from 'vue'
// 目標:创建组件和使用组件
// 1.创建.vue文件==标签+样式+js代码
// 2.引入组件
import son from '@/练习/组件/子组件'

// 3.注册组件
// 全局注册
// 语法：Vue.component('组件名',引入组件对象)
// Vue.component('Son', Son)
// 全局注册 ==一次注册到处直接使用
// 局部注册==只能在当前.vue文件内使用

// 4.使用组件
// 把组件名当做标签，在上面使用即可

export default {
  // 局部注册：
  /**
   * 语法
   * com破嫩他是：{
   * '组件名’：‘引入组件对象’}
   */
  components: {
    son
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
  }
}
</style>
